<template>
	<view>
		<view class="form">
			<view class="view-list-item">
				<text class="text-list-item">项目名称:</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入项目名称" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>
			<view class="view-list-item">
				<text class="text-list-item">项目名称:</text>
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle"></u-checkbox>
				</u-checkbox-group>
				<text>使用临时地址</text>
			</view>
			<input class="site-input" type="text" v-model="company" placeholder="请输入项目名称" />
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">公司名称(选填):</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入公司名称" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">联系人:</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入联系人电话" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">要求到货时间:</text>
				<text @click="date = true" class="input-text">{{time}}</text>
				<!-- <input @click="date = true" class="input-text" type="text" v-model="company" placeholder="请选择时间" /> -->
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">其他说明:</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入其他说明" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">上传清单:</text>
				<text class="uploading">请选择上传的格式</text>
				<image @click="show = true" class="img-right" src="../../static/shangchuan.png" mode=""></image>
			</view>
		</view>

		<u-datetime-picker :minDate="0" :maxDate="1786778555000" :show="date" v-model="value1" mode="date" @confirm="confirm" @cancel="closeDate"></u-datetime-picker>

		<u-popup :round="10" :show="show" @close="close" @open="open">
			<view class="popup-box">
				<view class="title">文件</view>
				<view style="height: 1rpx; background-color: #f9f9f9;"></view>
				<view class="title">图片</view>
				<view class="blank"></view>
				<view class="title" @click="show = false">取消</view>
			</view>
		</u-popup>

		<view style="height: 30rpx;"></view>

		<view class="form">
			<view class="title">
				<text class="text">添加商品</text>
				<image class="img" src="../../static/tianjia.png" mode=""></image>
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>
			<view class="view-list-item">
				<text class="text-list-item">商品名称:</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入商品名称" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">品牌(选填)</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入商品品牌" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">商品描述(选填)</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入商品描述" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">数量</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入商品数量" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">单位</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入商品单位" />
			</view>
			<view style="height: 1rpx; background-color: #f9f9f9;"></view>

			<view class="view-list-item">
				<text class="text-list-item">操作</text>
				<input class="input-text" type="text" v-model="company" placeholder="请输入操作描述" />
			</view>
		</view>

		<view class="btn">
			<u-button text="提交" color="linear-gradient(to bottom, rgb(29, 45, 167), rgb(95, 114, 253))">
			</u-button>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: Number(new Date()),
				date:false,
				checked: '',
				show: false,
				time:'请选择时间'
			}
		},

		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			closeDate() {
				this.date = false
			},
			confirm(e) {
				this.date = false
				console.log(e)
				// this.timestamp = e.value
				this.time = uni.$u.date(e.value, 'yyyy-mm-dd')
				console.log(this.time)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.view-list-item {
		display: flex;
		align-items: center;
		background-color: #FFF;
		height: 100rpx;
		// margin: 0 30rpx;
		padding: 0 30rpx;

		.text-list-item {
			flex-grow: 1;
			flex-shrink: 1;
			font-size: 30rpx;
			color: #222;

			.img {
				width: 80rpx;
				height: 40rpx;
			}
		}

		.uploading {
			font-size: 28rpx;
			color: #222;
		}

		text {
			font-size: 26rpx;
			color: #222;
			position: relative;
			top: -5rpx;
		}

		.input-text {
			text-align: right;
			font-size: 28rpx;
			color: #999;
		}

		.img-right {
			margin-left: 18rpx;
			width: 46rpx;
			height: 46rpx;
		}
	}

	.site-input {
		background-color: #FFF;
		text-align: right;
		font-size: 28rpx;
		color: #999;
		padding: 0 30rpx 0 0;
		height: 50rpx;
		position: relative;
		margin-top: -20rpx;
	}

	.popup-box {
		height: 356rpx;

		.title {
			height: 110rpx;
			text-align: center;
			line-height: 110rpx;
		}

		.blank {
			height: 20rpx;
			background-color: #f8f8f8;
		}
	}

	.form {
		.title {
			display: flex;
			align-items: center;
			background-color: #FFF;
			height: 100rpx;
			padding: 0 30rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.text {
			flex-grow: 1;
			flex-shrink: 1;
			font-size: 30rpx;
			color: #222;
		}

		.img {
			// margin-left: 18rpx;
			float: right;
			width: 90rpx;
			height: 90rpx;
		}
	}

	.btn {
		width: 560rpx;
		height: 90rpx;
		margin: auto;
		margin-top: 50rpx;
		border-radius: 20rpx;
	}
</style>
